<script lang="ts" setup>
import { Select, Tooltip, Switch } from 'ant-design-vue'
import { useRoute } from 'vue-router';

const route = useRoute()
const { modifyConfig, fetchGetProjectDatas, fetchGetEnvironmentDatas, fetchGetDatabaseDatas, fetchGetProxyDatas } = useGlobalConfigStore()
const { loadingWithGetProjectDatas, config, loadingWithGetEnvironmentDatas } = storeToRefs(
    useGlobalConfigStore(),
)

const disabled = computed(() => route.fullPath.includes('new-or-edit'))

fetchGetProjectDatas().then(() => {
    fetchGetEnvironmentDatas()
})
fetchGetDatabaseDatas()
fetchGetProxyDatas()
//请求权限
const permissionStore = usePermissionStore()
permissionStore.fetchUserRole()


const globalConfig = useGlobalConfigStore()
const { openLight } = storeToRefs(useGlobalConfigStore())

const themeRef = ref('')

onMounted(() => {
    document.documentElement.setAttribute('data-theme', openLight.value ? 'light' : 'dark');
})

const toggleTheme = () => {
    console.log('Toggling theme', themeRef.value.getBoundingClientRect());
    const e = themeRef.value.getBoundingClientRect()
    // 从点击的位置开始
    const x = e.x;
    const y = e.y;

    // 计算圆半径
    const tragetRadius = Math.hypot(
        Math.max(x, window.innerWidth - x),
        Math.max(y, window.innerWidth - y)
    );
    const transition = (document as any).startViewTransition(() => {
        globalConfig.setOpenLight(!openLight.value)
        document.documentElement.setAttribute('data-theme', openLight.value ? 'light' : 'dark');
        document.documentElement.classList.toggle("dark");
    });
    transition.ready.then(() => {
        const clipPath = [
            `circle(0px at ${x}px ${y}px)`,
            `circle(${tragetRadius}px at ${x}px ${y}px)`,
        ];
        //开始动画
        document.documentElement.animate(
            {
                clipPath: !openLight.value ? [...clipPath].reverse() : clipPath,
            },
            {
                duration: 400,
                easing: "ease-in",
                pseudoElement: !openLight.value
                    ? "::view-transition-old(root)"
                    : "::view-transition-new(root)",
            }
        );
    });

}

const changeProject = (value: number) => {
    modifyConfig({ projectId: value })
    modifyConfig({ environmentId: null })
    fetchGetEnvironmentDatas()
}
</script>

<template>
    <div flex space-x-4>
        <div>
            <span>选择项目：</span>
            <Select :disabled="disabled" :value="config.projectId" :loading="loadingWithGetProjectDatas"
                @update:value="changeProject($event as number)">

                <Select.Option v-for="{ id, name, description } in config.projectDatas" :key="id" :value="id">
                    <Tooltip :title="description">{{ name }}</Tooltip>
                </Select.Option>
            </Select>
        </div>

        <div :style="{ width: config.environmentId === null ? '180px' : '' }">
            <span>选择环境：</span>
            <Select :disabled="disabled" :value="config.environmentId === null ? '无数据' : config.environmentId"
                :loading="loadingWithGetEnvironmentDatas" @update:value="modifyConfig({ environmentId: $event as number })"
                :style="{ width: config.environmentId === null ? '60%' : '' }">
                <Select.Option v-for="{ id, name, description } in config.environmentDatas" :key="id" :value="id">
                    <Tooltip :title="description">{{ name }}</Tooltip>
                </Select.Option>
            </Select>
        </div>

        <div flex items-center ref="themeRef">
            <!-- <span>切换主题：</span> -->
            <!-- <Switch v-model:checked="openLight" checked-children="明亮" un-checked-children="黑暗" @change="toggleTheme"
                ref="themeRef">
            </Switch> -->
            <svg @click="toggleTheme" v-if="!openLight" t="1720602132310" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="27489" width="24" height="24">
                <path
                    d="M544.2 957c-7 0-14 0-21.2-0.4C291.2 946.2 97.6 759.6 81.4 532c-14-195.4 99-378 281-454.4 51.8-21.6 79-5 90.6 7 11.6 11.6 27.8 38.4 6.2 87.8-19 43.8-28.6 90.6-28.2 138.6 0.8 183.4 153.2 339 339 346.4 27 1.2 53.4-0.8 79-5.4 54.6-10 77.4 12 86 26 8.6 14 18.6 44.2-14.4 89-87.6 120-227 190-376.4 190zM143 527.4c14 197 182.2 358.4 382.4 367.2 136.2 6.6 265.4-55.4 344.8-164 6.2-8.6 9.2-15 10.4-18.2-3.8-0.4-10.4-0.8-20.6 1.2-30.2 5.4-61.6 7.4-92.8 6.2-218.6-8.6-397.4-192-398.6-408.2 0-57.2 11.2-112.2 34-164 4.2-9.2 5-15.4 5.4-18.6-3.8 0-10.4 0.8-21.2 5.4-157.6 66.4-255.4 224.4-243.8 393z"
                    p-id="27490" fill="#9CA3AF"></path>
            </svg>
            <svg v-else @click="toggleTheme" t="1720600403275" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="25918" width="24" height="24">
                <path
                    d="M512.000213 733.353497c-122.06857 0-221.353283-99.284713-221.353283-221.353284S389.931643 290.64693 512.000213 290.64693 733.353497 389.931643 733.353497 512.000213 634.026117 733.353497 512.000213 733.353497z m0-357.373767A136.148482 136.148482 0 0 0 375.97973 512.000213 136.148482 136.148482 0 0 0 512.000213 648.020697 136.148482 136.148482 0 0 0 648.020697 512.000213 136.148482 136.148482 0 0 0 512.000213 375.97973zM554.666613 171.735673A42.154403 42.154403 0 0 1 512.000213 213.335413c-23.551853 0-42.6664-18.645217-42.6664-41.59974V41.603153A42.154403 42.154403 0 0 1 512.000213 0.003413c23.551853 0 42.6664 18.645217 42.6664 41.59974v130.13252zM554.666613 982.397273A42.154403 42.154403 0 0 1 512.000213 1023.997013c-23.594519 0-42.6664-18.687883-42.6664-41.59974v-130.175186A42.111737 42.111737 0 0 1 512.000213 810.665013c23.551853 0 42.6664 18.60255 42.6664 41.59974v130.13252zM171.735673 469.333813c22.954523 0 41.59974 19.114547 41.59974 42.6664 0 23.594519-18.645217 42.6664-41.59974 42.6664H41.603153A42.154403 42.154403 0 0 1 0.003413 512.000213c0-23.551853 18.645217-42.6664 41.59974-42.6664h130.13252zM982.397273 469.333813c22.954523 0 41.59974 19.114547 41.59974 42.6664 0 23.594519-18.687883 42.6664-41.59974 42.6664h-130.175186A42.111737 42.111737 0 0 1 810.665013 512.000213c0-23.551853 18.60255-42.6664 41.59974-42.6664h130.13252zM241.239239 722.430898a42.06907 42.06907 0 0 1 59.562294 0.767995 42.111737 42.111737 0 0 1 0.767996 59.562295l-92.031425 92.074091a42.154403 42.154403 0 0 1-59.562295-0.853328 42.154403 42.154403 0 0 1-0.767995-59.562294l92.031425-91.988759zM814.462323 149.207814a42.154403 42.154403 0 0 1 59.562294 0.767995 42.154403 42.154403 0 0 1 0.767996 59.562295l-92.031425 92.031425a42.06907 42.06907 0 0 1-59.562295-0.767996 42.111737 42.111737 0 0 1-0.810661-59.562294l92.074091-92.031425zM241.239239 301.526862a42.19707 42.19707 0 0 0 59.604961-0.725329 42.111737 42.111737 0 0 0 0.767995-59.562294L209.538104 149.122481a42.154403 42.154403 0 0 0-59.562295 0.853328 42.111737 42.111737 0 0 0-0.767995 59.562295l92.031425 91.988758zM814.462323 874.792613a42.111737 42.111737 0 0 0 59.562294-0.810662 42.154403 42.154403 0 0 0 0.767996-59.562294l-92.031425-92.031425a42.06907 42.06907 0 0 0-59.562295 0.767995 42.111737 42.111737 0 0 0-0.810661 59.562294l92.074091 92.074092z"
                    fill="#9CA3AF" p-id="25919"></path>
            </svg>

    </div>
</div></template>
